<script lang="ts" setup>
import type { resData, userFromType, tableDataType } from "./type";
import request from "@/utils/request";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive } from "vue";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const centerDialogVisible = ref(false);
const tableData = ref<userFromType[]>([]);
const userFrom = reactive<userFromType>({
  username: "",
  role: "",
});
const getTableData = async () => {
  const res = await request.get<any, tableDataType>("/user/userList");
  tableData.value = res.data;
};
onMounted(() => {
  getTableData();
});
const handleEdit = (data: any) => {
  centerDialogVisible.value = true;
  (userFrom.username = data.username), (userFrom.role = data.role);
};
const handleEditData = () => {
  request.put<any, resData>(`/user/userList/${userFrom.username}`, userFrom);
  centerDialogVisible.value = false;
};
const handleDelete = async (data: any) => {
  const res = await request.delete<any, resData>(`/user/userList/${data.username}`);
  if (res.code == "200") {
    tableData.value.forEach((obj, index) => {
      if (obj.username === data.username) {
        tableData.value.splice(index, 1); // 删除当前索引的对象
      }
    });
  }
};
const options = [
  {
    label: "管理员",
    value: "0",
  },
  {
    label: "用户",
    value: "1",
  },
];
const goBack = () => {
  router.back();
};
</script>
<template>
  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 用户列表 </span>
    </template>
  </el-page-header>
  <div class="divBox">
    <el-table :data="tableData">
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="role" label="权限">
        <template #default="scope">
          <el-tag
            type="danger"
            v-if="scope.row.role == 0 && scope.row.username == 'admin'"
            >超级管理员</el-tag
          >
          <el-tag
            type="primary"
            v-else-if="scope.row.role == 0 && scope.row.username1 !== 'admin'"
            >管理员</el-tag
          >
          <el-tag type="success" v-else>普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="store.state.userInfo.username == 'admin'">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            @confirm="handleDelete(scope.row)"
            title="你确认要删除吗?"
            confirm-button-text="是"
            cancel-button-text="否"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="centerDialogVisible" title="修改权限" width="500">
    <el-form ref="userFormRef" style="max-width: 600px" :model="userFrom" status-icon>
      <el-form-item>
        <p>账号：{{ userFrom.username }}</p>
      </el-form-item>
      <el-form-item prop="role">
        <el-select v-model="userFrom.role" placeholder="请选择权限" style="width: 100%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditData"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-tag {
  cursor: default;
}
.divBox {
  display: flex;
  height: calc(100% - 24px);

  justify-content: center;
  align-items: center;
  .el-table {
    width: 80%;
  }
}
</style>
